<template>
	<view :class="show?'citylist':'none'">
	  <view style="height:40px;border-bottom: 1Px solid #f0f0f0;" class="row">
	    <view class="col-2" style="padding:20rpx 0 0 5px" @tap="close">
	      <icon type="cancel" size="20" color="gray" />
	    </view>
	    <view class="col-8 al-center" style="padding-top:16rpx;font-size:16px">选择城市</view>
	    <view class="col-2"></view>
	  </view>
	 
	  <scroll-view
	      scroll-y
	      :scroll-into-view="toView"
	      style="height: calc(100vh - 40px);"
	    >
	
	    <view class="at-indexes__list-title" id="title_cur">当前</view>
	    <view style="width:90vw;margin:0 auto">
	      <text bindtap="close" class="city-item">{{local=="城市"?"全部":local}}</text>
	    </view>
	
	    <view v-if="lastList.length>0" class="at-indexes__list-title" id="title_his">历史选择</view>
	    <view style="width:90vw;margin:0 auto">
	      <view @tap="item(item)"
	        class="city-item" v-for="item in lastList" :key="item.areaCode">
	        {{item.attenCity}}
	      </view>
	    </view>
	
	    <view class="at-indexes__list-title" id="title_hot">热门城市</view>
	    <view style="width:90vw;margin:0 auto;">
	      <view @tap="select(item)"
	        v-for="item in popList" :key="item.areaCode" class="city-item">
	        {{item.attenCity}}
	      </view>
	    </view>
	
	    <view v-for="item in cityList" :key="item.title">
	      <view class="at-indexes__list-title" :id="'title_'+item.title">{{item.title}}</view>
	      <view @tap="select(item)"
	        class="at-indexes__list-items" v-for="i in item.items" :key="i.areaCode">
	        {{i.attenCity}}
	      </view>
	    </view>
	    
	  </scroll-view>
	
	  <view style="z-index:1000" class="at-indexes__menu">
	    <view class="at-indexes__menu-item" @tap="intoView('cur')" data-id="cur">当前</view>
	    <view v-if="lastList.length>0" 
	      class="at-indexes__menu-item" @tap="intoView('his')" data-id="his">历史</view>
	    <view class="at-indexes__menu-item" @tap="intoView('hot')" data-id="hot">热门</view>
	    <view class="at-indexes__menu-item" v-for="item in cityList" :key="item.areaCode" 
	      @tap="intoView(item.title)">
	      {{item.title}}
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		name: "pickcity",
		props: {
			show: { 
				type: Boolean, //
				value: false
			},
			local: {
				type: String,
				value: ''
			}
		},
		data() {
		    return {
				cityList: [],
				popList: [],
				lastList: [],
				toView: 'title_cur'
		    }
		},
		// 组件生命周期
		created:function(e){
			this.getCitys(); // 获取城市
			this.getPopCity();
		},
		watch: {
			
		},
		methods: {
			intoView(e){
			  let info = e;
			  let title = e;
			  switch (title) {
				case 'cur': { info = '当前城市'; break; }
				case 'hot': { info = '热门城市'; break; }
				case 'his': { info = '历史选择'; break; }
			  }
			  uni.showToast({
				title: info,
				icon: 'none'
			  });
			  this.toView = 'title_' + title;
			},
			
			select(item){
			  uni.$emit('cityselect', item)
			},
		
			close(){
			  uni.$emit('cityclose', {})
			},
			
			// 获取城市列表
			getCitys(){
			  let cityList = uni.getStorageSync('cityList');
			  if (cityList) {
				this.cityList = cityList;
			  } else {
				let _this = this;
				this.baseRequest('api/city/h5/page', 'GET', {}, function (res) {
				  _this.cityList = res;
				  uni.setStorageSync('cityList', res);
				});
			  }
			},
			
			// 获取热门城市列表
			getPopCity() {
			  let _this = this;
			  this.baseRequest('api/city/choice/pop', 'GET', {}, function (res) {
				_this.popList = res.popList;
				_this.lastList = res.lastList ? res.lastList : [];
			  });
			}
		}
	}
</script>

<style>
	.citylist{background:#fff; width:100vw;position:fixed;right:0;height:100vh;z-index:999;
		animation:myfirst 0.1s; top:0;
		-webkit-animation:myfirst 0.1s; /* Safari and Chrome */
	}
	.none{display: none}
	@keyframes myfirst
	{
		0%   {right:-40vw;}
		25%  {right:-30vw;}
		50%  {right:-20vw;}
		75%  {right:-10vw;}
		100% {right:0;}
	}
	
	@-webkit-keyframes myfirst /* Safari and Chrome */
	{
		0%   {right:-40vw;}
		25%  {right:-30vw;}
		50%  {right:-20vw;}
		75%  {right:-10vw;}
		100% {right:0;}
	}
	.city-item{font-size: 28rpx; padding: 10rpx 30rpx;display:inline-block; 
	  margin:10rpx 15rpx;border:1px solid #f0f0f0}
	
	.col-1 {width: 8.33%;float: left;}
	.col-2 {width: 16.66%;float: left;}
	.col-3 {width: 25%;float: left;}
	.col-4 {width: 33.33%;float: left;}
	.col-5 {width: 41.66%;float: left;}
	.col-6 {width: 50%;float: left;}
	.col-7 {width: 58.33%;float: left;}
	.col-8 {width: 66.66%;float: left;}
	.col-9 {width: 75%;float: left;}
	.col-10 {width: 83.33%;float: left;}
	.col-11 {width: 91.66%;float: left;}
	.col-12 {width: 100%;float: left;}
	.row:after {
	    content: "";
	    clear: both;
	    display: block;
	}
	.al-center{text-align: center;}
	.at-indexes__list-title {
	    padding: .21333rem .512rem;
	    color: #7f7f7f;
	    font-size: 24rpx;
	    background-color: #f7f7f7;
	}
	.at-indexes__menu {
	    position: fixed;
	    top: 50%;
	    right: 0;
	    overflow: hidden;
	    -webkit-transform: translate3d(0,-50%,0);
	    transform: translate3d(0,-50%,0);
	    z-index: 1000;
	}
	.at-indexes__menu-item {
	    padding: .04267rem .21333rem;
	    color: #6190e8;
	    font-size: 24rpx;
	    text-align: center;
	}
	.at-indexes__list-items{
	  border-top: 1px solid #d6e4ef;
	  padding: .61333rem .512rem;
	  font-size: 28rpx;
	}
</style>